<template>
  <div class="pageAdimin">
    <el-card>
      <p class="driver_p0">
        <i class="el-icon-s-opportunity"></i>本页面只有admin权限下显示
      </p>
      <div class="driver_p0">你的权限页面是:</div>
      <el-tag v-for="item in roles" :key="item">{{ item }}</el-tag>
    </el-card>
    <div class="parent">
      <div class="child" @click="fn(1)"></div>
      <div class="child" @click="fn(13)"></div>
      <div class="child" @click="fn(451)"></div>
      <div class="child" @click="fn(1453)"></div>
      <div class="child" @click="fn(1545)"></div>
      <div class="child" @click="fn(145)"></div>
      <div class="child" @click="fn(451)"></div>
      <div class="child" @click="fn(451)"></div>
    </div>
    <div class="parent1">
      <div class="child1" @click="fn(1)"></div>
      <div class="child1" @click="fn(13)"></div>
      <div class="child1" @click="fn(451)"></div>
      <div class="child1" @click="fn(1453)"></div>
      <div class="child1" @click="fn(1545)"></div>
      <div class="child1" @click="fn(145)"></div>
      <div class="child1" @click="fn(451)"></div>
      <div class="child1" @click="fn(451)"></div>
    </div>
    <div class="block">
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="change"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    fn(e) {
      console.log(e)
    },
    change(e) {
      console.log('change事件', e)
    }
  },
  data() {
    return {
      // pickerOptions: {
      //   shortcuts: [
      //     {
      //       text: '最近一周',
      //       onClick(picker) {
      //         const end = new Date()
      //         const start = new Date()
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      //         picker.$emit('pick', [start, end])
      //       }
      //     },
      //     {
      //       text: '最近一个月',
      //       onClick(picker) {
      //         const end = new Date()
      //         const start = new Date()
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      //         picker.$emit('pick', [start, end])
      //       }
      //     },
      //     {
      //       text: '最近三个月',
      //       onClick(picker) {
      //         const end = new Date()
      //         const start = new Date()
      //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      //         picker.$emit('pick', [start, end])
      //       }
      //     }
      //   ]
      // },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      value1: [],
      value2: ''
    }
  }
}
</script>
<style scoped lang="scss">
.pageAdimin .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
.driver_p0 {
  font-size: 14px;
  margin-bottom: 20px;
  i {
    margin-right: 5px;
    color: #ffc107;
    font-size: 18px;
  }
}
.parent {
  margin-top: 20px;
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 25px;
  .child {
    width: 400px;
    height: 50px;
    background-color: aqua;
    margin: 0 10px;
    white-space: nowrap;
    display: inline-block;
  }
}
.parent1 {
  width: 800px;
  height: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-y: scroll;
  .child1 {
    width: 300px;
    height: 400px;
    background-color: pink;
    margin: 10px;
  }
}
// // 滚动轴整体，主要设置宽度
.parent1::-webkit-scrollbar,
.parent::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}

// // 滚动轴的背景区域
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  background: '#F6F6F6';
}

// // 滚动轴
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: '#E0E0E0';
}

// // 滚动轴浮动样式
::-webkit-scrollbar-thumb:hover {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(189, 118, 118, 0.3);
}
</style>
